.chatList {
	.sticky {
		background: linear-gradient(180deg, #fff6ea 0%, rgba(243, 243, 243, 0) 100%);

		.topTitle {
			background: transparent;
		}

		.addFriend {
			display: flex;
			align-items: center;
			position: absolute;
			right: 0;

			> image {
				width: 26px;
				height: 26px;
			}

			.triangle-up {
				width: 125px;
				background: rgba(0, 0, 0, 0.88);
				border-radius: 10px;
				position: absolute;
				right: -8px;
				top: 36px;
				padding: 15px 0;

				&::before {
					content: "";
					display: block;
					background: url(@/static/image/9.png) no-repeat;
					background-size: 100% 100%;
					width: 10px;
					height: 6px;
					position: absolute;
					right: 16px;
					top: -6px;
				}

				> view {
					font-size: 15px;
					color: #ffffff;
					padding-left: 45px;
					margin-bottom: 24px;
				}

				> view:nth-child(1) {
					background: url(@/static/image/6.png) no-repeat left 10px center;
					background-size: 22px 22px;
				}

				> view:nth-child(2) {
					background: url(@/static/image/7.png) no-repeat left 10px center;
					background-size: 22px 22px;
				}

				> view:nth-child(3) {
					background: url(@/static/image/8.png) no-repeat left 10px center;
					background-size: 22px 22px;
				}

				> view:last-child {
					margin-bottom: 0;
				}
			}
		}
	}

	.titleBg {
		background: #ffffff !important;
		border-bottom: 1px solid #f3f3f3;
	}

	.com {
		padding: 0 10px 60px;

		.msgList {
			border-radius: 5px;
			margin: 20px 0 0;
			overflow: hidden;
			background: #ffffff;
			min-height: 73vh;
			.btns {
				display: flex;

				height: 100%;
				color: #fff;
				> view {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 10px;
					font-size: 14px;
				}
				> view:nth-child(1) {
					background: #3c9cff;
				}
				> view:nth-child(2) {
					background: #f56c6c;
				}
			}

			.msgItem {
				display: flex;
				justify-content: space-between;
				background: #ffffff;

				padding: 12px 10px;
				border-bottom: 1px solid #f3f3f3;

				> view:nth-child(1) {
					display: flex;
					width: 80%;

					> view {
						> image {
							width: 50px;
							height: 50px;
						}
					}

					.name {
						width: 75%;
						margin-left: 10px;

						> view:nth-child(1) {
							font-size: 16px;
							color: #000000;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							height: 22px;
						}

						> view:nth-child(2) {
							font-size: 14px;
							color: rgba(0, 0, 0, 0.5);
							margin-top: 4px;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							height: 20px;

							> view {
								width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.unread {
								color: #e1862b;
							}
						}
					}
				}

				> view:nth-child(2) {
					margin-top: 5px;

					> view:nth-child(1) {
						font-size: 13px;
						color: rgba(0, 0, 0, 0.5);
						text-align: right;
					}

					> view:nth-child(2) {
						margin-top: 8px;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.dot {
							margin-left: 8px;
						}
					}
				}
			}

			.msgItem:active {
				opacity: 0.8;
				background: #eee;
			}

			.touch-active {
				opacity: 0.8;
				background: #eee;
			}

			> view:last-child {
				border-bottom: 0;
			}
		}
	}
}
